import React, { createContext, PureComponent } from 'react'

// 定义高阶组件
function withUser(WrapperComponent) {
  return props => {
    return (
      <UserContext.Consumer>
        {
          user => {
            console.log(props)
            return (
              <WrapperComponent {...props} {...user}/>
            )
          }
        }
      </UserContext.Consumer>
    )
  }
}

// 创建Context
const UserContext = createContext({
  nickname: 'xx',
  level: 99,
  region: '中国'
})

class Home extends PureComponent {
  render() {
    return (
      <h2>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
    )
  }
}

class About extends PureComponent {
  render() {
    return (
      <h2>About: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
    )
  }
}

class Detail extends PureComponent {
  render() {
    return (
      <ul>
        <li>昵称: {this.props.nickname}</li>
        <li>等级: {this.props.level}</li>
        <li>区域: {this.props.region}</li>
      </ul>
    )
  }
}

const UserHome = withUser(Home)
const UserAbout = withUser(About)
const UserDetail = withUser(Detail)

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <UserContext.Provider value={{nickname: 'yy', level: 23, region: '中国'}}>
          <UserHome/>
          <UserAbout/>
          <UserDetail/>
        </UserContext.Provider>
      </div>
    )
  }
}

export default App